<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>360Demo</title>
    <style>
        /*第一屏幕*/
        
        body {
            margin: 0;
            padding: 0;
        }
        
        .section {
            position: relative;
            overflow: hidden;
        }
        
        .first {
            padding-top: 80px;
        }
        
        .first .logo {
            background-image: url(./images/logo.png);
            width: 251px;
            height: 186px;
            margin: 0 auto;
        }
        
        .first .text {
            text-align: center;
            margin: 85px 0 45px;
        }
        
        .first img {
            margin: 0 24px;
            opacity: 0;
        }
        
        .first .info {
            background-image: url(./images/info_1.png);
            height: 49px;
        }
        /*动画*/
        
        .first.current img {
            margin: 0;
            opacity: 1;
            transition: all 1s ease-out 0.3s;
        }
        /*---------------------------------------------------*/
        /*第二屏幕*/
        
        .second {
            padding: 0 100px;
        }
        
        .shield {
            width: 500px;
            height: 500px;
        }
        
        .second img {
            display: block;
            float: left;
        }
        
        .second img:nth-child(1) {
            transform: translate(-100px, 78px) rotate(45deg);
        }
        
        .second img:nth-child(2) {
            transform: translate(30px, 135px) rotate(-45deg);
        }
        
        .second img:nth-child(3) {
            transform: translate(28px, 200px) rotate(30deg);
        }
        
        .second .info {
            background-image: url(./images/info_2.png);
            height: 309px;
            width: 635px;
        }
        
        .second > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        /*动画*/
        
        .second.current img {
            transform: translate(0, 0) rotate(0deg);
            transition: all 0.8s linear;
        }
        /*----------------------------------------------------------------------------*/
        /*第三屏幕*/
        
        .third {
            padding: 0 60px;
        }
        
        .third > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .third .info {
            background: url("./images/info_3.png");
            width: 631px;
            height: 278px;
        }
        
        .third .circle {
            background: url("./images/circle.png");
            width: 453px;
            height: 449px;
            animation: xuanzhuan 1s linear infinite;
        }
        
        .third .rocket {
            position: absolute;
            background: url("./images/rocket.png");
            width: 204px;
            height: 204px;
            bottom: -204px;
            left: -204px;
        }
        /*动画*/
        
        @keyframes xuanzhuan {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        .third.current .rocket {
            transform: translate(1184px, -444px) rotate(30deg);
            transition: all 2s ease-in-out;
        }
        /*-----------------------------------------------------------*/
        /*第四屏幕*/
        
        .forth {
            padding: 0 85px;
        }
        
        .forth >div {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .forth .search {
            width: 529px;
            height: 320px;
            position: relative;
            transform: translateX(-150%);
        }
        
        .forth .input {
            background: url("./images/search.png");
            width: 529px;
            height: 66px;
            ;
        }
        
        .forth .key {
            background: url("./images/key.png") left center;
            width: 0;
            height: 22px;
            position: absolute;
            left: 20px;
            top: 24px;
        }
        
        .forth .wrap {
            width: 529px;
            height: 393px;
            overflow: hidden;
            transform: translateY(-13px);
        }
        
        .forth .result {
            width: 100%;
            height: 100%;
            background: url("./images/result.png") no-repeat;
            transform: translateY(-100%);
        }
        
        .forth .info {
            background: url("./images/info_4.png");
            width: 612px;
            height: 299px;
        }
        /*动画*/
        
        .forth.current .search {
            transition: all 1s linear;
            transform: translateX(0);
        }
        
        .forth.current .key {
            animation: kuan 1.5s steps(5) 1.3s forwards;
        }
        
        .forth.current .result {
            transition: all 0.8s linear 2.8s;
            transform: translateY(0);
        }
        
        @keyframes kuan {
            from {
                width: 0;
            }
            to {
                width: 100px;
            }
        }
        /*-------------------------------------------------------*/
        /*第五屏幕*/
        
        .fifth {
            /*padding-top: 30px;*/
        }
        
        .fifth > div {
            display: flex;
            flex-direction: column;
        }
        
        .fifth .info {
            height: 135px;
            margin: 30px 0;
            background: url(./images/info_5.png) center center no-repeat;
        }
        
        .fifth .broswer {
            width: 1004px;
            margin: 0 auto;
            flex: 1;
            background-color: rgba(255, 255, 255, 0.15);
            position: relative;
        }
        
        .fifth .toolbar {
            height: 80px;
            background: url(./images/toolbar.png) left bottom no-repeat;
            position: relative;
            opacity: 0;
        }
        
        .leftline,
        .topline,
        .rightline,
        .bottomline {
            position: absolute;
            border-color: rgba(255, 255, 255, 0.5);
        }
        
        .leftline {
            left: 0;
            height: 100%;
            border-left: 1px solid rgba(255, 255, 255, 0.5);
            transform: translateY(-100%);
            opacity: 0;
        }
        
        .topline {
            top: 0;
            width: 100%;
            border-top: 1px solid rgba(255, 255, 255, 0.5);
            transform: translateX(100%);
            opacity: 0;
        }
        
        .rightline {
            right: 0;
            height: 100%;
            border-right: 1px solid rgba(255, 255, 255, 0.5);
            transform: translateY(100%);
            opacity: 0;
        }
        
        .bottomline {
            bottom: 0;
            width: 100%;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        .fifth .box {
            position: absolute;
            left: 70px;
            top: 32px;
            width: 0;
            /*width: 920px;*/
            height: 27px;
            overflow: hidden;
        }
        
        .fifth .box span {
            display: block;
            width: 100%;
            height: 100%;
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 3px;
            box-sizing: border-box;
        }
        
        .fifth .extra {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 394px;
            height: 29px;
            background: url(./images/extra.png);
            opacity: 0;
        }
        
        .fifth .line {
            width: 100%;
            position: absolute;
            bottom: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.5);
        }
        /*动画*/
        
        .current.fifth .leftline {
            transition: all 1s ease-in-out;
            transform: translateY(0);
            opacity: 1;
        }
        
        .current.fifth .topline {
            transition: all 1s 0.5s ease-in-out;
            transform: translateX(0);
            opacity: 1;
        }
        
        .current.fifth .rightline {
            transition: all 1s 0.5s ease-in-out;
            transform: translateY(0);
            opacity: 1;
        }
        
        .current.fifth .toolbar {
            transition: all 2s 1.5s ease-in-out;
            opacity: 1;
        }
        
        .current.fifth .box {
            transition: all 1s 1.5s ease-in-out;
            width: 920px;
        }
        
        .current.fifth .extra {
            transition: all 1s 1.5s ease-in-out;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div id="fullpage">
        <!-- 第一屏-->
        <div class="section first">
            <div class="logo"></div>
            <div class="text">
                <img src="images/text_1.png" alt="" />
                <img src="images/text_2.png" alt="" />
                <img src="images/text_3.png" alt="" />
                <img src="images/text_4.png" alt="" />
                <img src="images/text_5.png" alt="" />
                <img src="images/text_6.png" alt="" />
                <img src="images/text_7.png" alt="" />
                <img src="images/text_8.png" alt="" />
            </div>
            <div class="info"></div>
        </div>




        <!-- 第二屏-->
        <div class="section second">
            <div class="shield">
                <img src="images/shield_1.png" alt="" />
                <img src="images/shield_2.png" alt="" />
                <img src="images/shield_3.png" alt="" />
                <img src="images/shield_4.png" alt="" />
                <img src="images/shield_5.png" alt="" />
                <img src="images/shield_6.png" alt="" />
                <img src="images/shield_7.png" alt="" />
                <img src="images/shield_8.png" alt="" />
                <img src="images/shield_9.png" alt="" />
            </div>
            <div class="info"></div>
        </div>




        <!-- 第三屏-->
        <div class="section third">
            <div class="info"></div>
            <div class="circle"></div>
            <div class="rocket"></div>
        </div>




        <!-- 第四屏-->
        <div class="section forth">
            <div class="search">
                <div class="input"></div>
                <div class="key"></div>
                <div class="wrap">
                    <div class="result"></div>
                </div>
            </div>
            <div class="info"></div>
        </div>




        <!-- 第五屏-->
        <div class="section fifth">
            <!-- 信息 -->
            <div class="info"></div>
            <!-- 浏览器 -->
            <div class="broswer">
                <!-- 四边框 -->
                <div class="leftline"></div>
                <div class="topline"></div>
                <div class="rightline"></div>
                <div class="bottomline"></div>
                <!-- 工具栏 -->
                <div class="toolbar"></div>
                <!-- 边框盒子 -->
                <div class="box">
                    <span></span>
                </div>
                <div class="line"></div>
                <!-- 其它 -->
                <div class="extra"></div>
            </div>
        </div>
    </div>
</body>

</html>






<script src="../../jquery.min.js"></script>
<script src="../../jquery.fullPage.min.js"></script>
<script>
    $("#fullpage").fullpage({
        // 设置背景色
        sectionsColor : ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
        afterLoad: function (anchorLink, index) {
            $(".section").removeClass("current");

            // 延时100毫秒执行
            setTimeout(function () {
                $(".section").eq(index - 1).addClass("current");
            }, 100);
        }
    });
</script>